<template>
  <div>
    <el-header><top-bar></top-bar></el-header>
    <el-card class="box-card" style="width: 100%; height: 70px">
      <div
        style="width: 200px; height: 50px; margin-top: auto; margin-top: -20px"
      >
        <span>
          <h3 style="margin-top: auto" @click="goHome">就爱商城</h3>
        </span>
        <span> 收银台 </span>
      </div>
      <div style="margin-top: -20px; margin-left: 600px">
        <span> 你好，{{ username }} </span>
      </div>
      <!-- <div style="margin-left: 1000px; margin-top: -30px">
        <el-row>
          <el-button type="warning" plain>我的订单</el-button>
        </el-row>
      </div> -->
    </el-card>
    <el-card class="money-card" style="height: 90px; width: 100%">
      <div style="width: 200px; height: 50px">
        <span>成功生成订单！！ 订单号：{{ ordernumber }}</span>
      </div>
      <div style="margin-left: 1000px; margin-top: -30px">
        应付金额：{{ routerVal }} 元
      </div>
    </el-card>

    <el-card style="width: 100%">
      <span style="font-size:20px;font-weight: bold;">收货地址</span>
    </el-card>
    <!-- 收货地址 -->
    <el-table
      ref="singleTable"
      :data="userArr"
      highlight-current-row
      @current-change="changeUser"
      border
      style="width: 100%"
    >
      <el-table-column prop="userName" label="用户名" width="180">
      </el-table-column>
      <el-table-column prop="customerOrderAddress" label="收货地址">{{customerOrderAddress}}
      </el-table-column>
      <el-table-column>
        <template>
          <el-button type="primary" @click="changeUserMsg" plain
            >修改收货地址</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-table
      :data="tableData"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%"
    >
      <el-table-column type="index" width="80"> </el-table-column>
      <el-table-column
        property="paymentMethod"
        label="支付方式"
        width="200 height:200"
      >
      </el-table-column>
      <el-table-column property="money" width="200"> </el-table-column>
    </el-table>
    <el-row style="margin-left: 1100px">
      <el-button type="danger" round @click="toPay()">立即支付</el-button>
    </el-row>

    <!-- 模态框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span style="font-size: 30px">请确认支付</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="提示"
      :model="userArr"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <span style=" " :data="fromData">
        收货地址：<el-input v-model.lazy="fromData.customerOrderAddress">
        </el-input
      ></span>
      <span slot="footer" class="dialog-footer" >
        <el-button @click="newCancel">取 消</el-button>
        <el-button type="primary" @click="newDetermine">确 定</el-button>
      </span>
    </el-dialog>

    <router-view></router-view>
  </div>
</template>

<script>
import { addSales } from "../../../api/Sales";  
import { changeUserMsg, getUsers } from "../../../api/Users";
import TopBar from "../TopBar/TopBar.vue";
export default {
  inject: ["reload"],
  components: {
    TopBar,
  },
  // watch: {
  //           //监听路由
  //           $route(val){
  //              console.log(val,"333333333333333")
  //           },
  //       },
  data() {
    return {
      //订单号
      ordernumber: "",
      //获取监听值
      routerVal: this.$route.query.id,
      userId: localStorage.getItem("userId"),
      comId: 0,
      payMethod: "",

      username: localStorage.getItem("userName"),
      tableData: [
        {
          paymentMethod: "支付宝支付",
          money: this.routerVal + " 元",
        },
        {
          paymentMethod: "微信支付",
          money: "6666 元",
        },
        {
          paymentMethod: "银行卡支付",
          money: "6666 元",
        },
        {
          paymentMethod: "信用卡支付",
          money: "6666 元",
        },
      ],
      fromData: {
        customerOrderAddress: "",
      },
      userArr: [],
      newUserArr: [],
      dialogVisible: false,
      centerDialogVisible: false,
      input: "",
      passWord: localStorage.getItem("userPassword"),
      customerOrderAddress: "",
      OrderAddress: "",
      currentRow: null,
      province:'',
      city:'',
      district:''
    };
  },
  mounted() {
    //获取地址
    var data = { key: "EDDBZ-BYXL3-WSF3C-3RWXI-NCV46-ZEBZ4" };
    var url = "https://apis.map.qq.com/ws/location/v1/ip";
    data.output = "jsonp";
    this.$jsonp(url, data)
      .then((res) => {
        this.province = res.result.ad_info.province;
        this.city = res.result.ad_info.city;
        this.district = res.result.ad_info.district;
      })
      .catch((err) => {
        console.log(err);
      });




    this.money();
    this.order();
    this.fetch();
    this.comId = this.$route.query.commodityId - 0;
    // console.log(this.routerVal);

    // var money =  this.$route.query.id
    // console.log(money);
  },

  methods: {
    //随机生成订单号 12位
    order() {
      var mynum = Math.floor(Math.random() * 1000000000000);
      var numlist = mynum.toString().split("");
      if (numlist.length !== 12) {
        for (let i = 0; i < 12 - numlist.length; i++) {
          numlist.unshift("0");
        }
      }
      // console.log(numlist.join(""));
      this.ordernumber = numlist.join("");
    },
    goHome() {
      this.$router.push({ path: "/" });
    },

    handleCurrentChange(val) {
      this.currentRow = val;
      this.payMethod = this.currentRow.paymentMethod;
    },
    changeUser(val) {
      this.currentRow = val;
      this.customerOrderAddress = this.currentRow.customerOrderAddress;
    },
    changeUserMsg() {
      this.userArr.forEach((item) => {
        this.fromData.customerOrderAddress = item.customerOrderAddress;
      });
      this.centerDialogVisible = true;
    },

    newDetermine() {
      // console.log(this.userArr);

      this.centerDialogVisible = false;
      changeUserMsg(parseInt(this.userId), {
        CustomerOrderAddress: this.fromData.customerOrderAddress,
      })
        .then((data) => {
          console.log(data);
          this.reload();
        })
        .catch((err) => {
          console.log(err);
        });
    },

    newCancel() {
      this.centerDialogVisible = false;
    },

    //购买金额显示
    money() {
      this.tableData.forEach((item) => {
        item.money = this.routerVal;
        // console.log(item.money);
      });
    },

    //获取当前时间
    getDay(day) {
      var today = new Date();
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds);
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tYear + "-" + tMonth + "-" + tDate;
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = "0" + month;
      }
      return m;
    },

    //立即支付
    toPay() {
      this.dialogVisible = true;
      // console.log(this.ordernumber.toString());
      // console.log(this.getDay(0).toString());
      // console.log(this.getDay(1).toString());
      // console.log(parseInt(this.routerVal));
      // console.log(parseInt(this.userId));
      console.log(this.comId);
      console.log(this.customerOrderAddress);
      // console.log(this.payMethod);
      // console.log(this.passWord);
    },
    cancel() {
      this.dialogVisible = false;
      this.$message.error("取消支付");
    },
    determine() {
      this.dialogVisible = false;
      if (this.payMethod == "" || this.customerOrderAddress == null) {
        this.$message.warning("请选择收货地址或支付方式！！！");
      } else {
        addSales({
          SalesNumber: this.ordernumber.toString(),
          Date: this.getDay(0).toString(),
          NumberOfSingleProductItems: 1,
          TotalNumberOfObjects: 1,
          SingleAmount: parseInt(this.routerVal),
          TotalMoney: parseInt(this.routerVal),
          PaymentMethod: this.payMethod,
          UserId: parseInt(this.userId),
          CommodityId: this.comId,
          LogisticsInformation: this.customerOrderAddress,
          DeliveryTime: this.getDay(1).toString(),
          SalesStatus: "代发货",
          PaymentStatus: "已支付",
          PaymentAmount: parseInt(this.routerVal),
          BuyerStatus: "已付款，代发货",
        })
          .then((data) => {
            console.log(data);
          })
          .catch((err) => {
            console.log(err);
          });
        this.$message({
          message: "支付成功",
          type: "success",
        });
        setTimeout(() => {
          this.$router.push({ path: "/order" });
        }, 3000);
      }
    },

    fetch() {
      //获取用户信息
      getUsers()
        .then((data) => {
          var res = data.data.data;
          res.map((val) => {
            if (val.userName == this.username) {
              this.userArr.push(val);
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #333;
  color: #333;
  text-align: center;
  line-height: 40px;
}
.el-header {
  height: 40px !important;
  padding: 0 120px;
}

.el-main {
  background-color: whitesmoke;
  color: #333;
  text-align: center;
  /* line-height: 160px; */
  min-height: 750px;
  height: 100%;
  padding: 0;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}

.el-table th {
  height: 100px;
  /* background: cornsilk; */
}
</style>